<template>
  <div class="msgBox-main">
    <div v-loading="loading">
      <el-empty description="暂无消息" v-if="total==0"></el-empty>
      <div class="message-list" v-else>
        <div class="msg-item" v-for="(item,i) in list" @click="read(item.msg_id,i)">
          <div class="msg-header">
            <div :class="['title',item.read==0?'unread':'']">
              {{ item.title }}
            </div>
            <div class="t">
              {{ item.dateline }}
            </div>
          </div>
          <div class="content" v-html="item.content" >

          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getMyMsgList, goReadMsg } from '@/api/user'

export default {
  name: 'msgList',
  data() {
    return {
      loading: true,
      total: 0,
      list: []
    }
  },

  created() {
    this.getSelfMessage()
  },
  methods: {
    read(ids, index) {
      let newRead = this.list[index]
      newRead['read'] = 1
      this.$set(this.list, index, newRead)
      goReadMsg({ id: ids }).then(r => {})
    },
    getSelfMessage() {
      getMyMsgList().then(r => {
        this.loading = false
        this.total = r.data.total
        this.list = r.data.data
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.msgBox-main {

  .msg-item {
    padding: 20px;
    cursor: pointer;

    &:hover {
      background: #eee;
    }

    border-bottom: 1px solid #eee;
    padding-bottom: 10px;

    .msg-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: #222;
      font-size: 17px;

      .title.unread {
        font-weight: bold;
      }

      .t {
        color: #7E8081;
        font-size: 16px;
      }
    }

    .content {
      color: #7E8081;
      font-size: 14px;
      padding: 10px 0;
      border-radius: 5px;
      white-space:pre-wrap;
      line-height: 26px;
    }
  }
}
</style>
